<template>
    <section>
    
        <el-table :data="tableData"
                  style="width:100%;"
                  @selection-change="selsChange">
            <el-table-column type="selection"
                             width="55"></el-table-column>
            <el-table-column prop="id"
                             label="id"
                             width="70"></el-table-column>
            <el-table-column prop="article_id"
                             label="文章id"></el-table-column>
            <el-table-column prop="user_id"
                             label="评论者id"></el-table-column>
            <el-table-column prop="root_id"
                             label="节点id"></el-table-column>
            <el-table-column prop="body"
                             label="评论内容"
                             width="220"></el-table-column>
            <el-table-column prop="created_at"
                             label="创建时间"
                             sortable></el-table-column>
            <el-table-column prop="updated_at"
                             label="更新时间"
                             sortable></el-table-column>
            <el-table-column label="操作"
                             width="150">
                <template scope="scope">
                    <el-button size="small"
                               @click="editHandle(scope.$index,scope.row)">编辑</el-button>
                    <el-button type="danger"
                               size="small"
                               @click="delHandle(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--工具条-->
        <el-col :span="24"
                class="toolbar"
                style="margin-top:20px;">
            <el-button type="danger"
                       @click='batchRemove'>批量删除</el-button>
            <el-pagination layout="prev, pager, next"
                           :page-size="pagesize"
                           :total="total"
                           :current-page="currentpage"
                           style="float:right;"
                           @current-change="pageHandle">
            </el-pagination>
        </el-col>
        <el-dialog title="修改评论"
                   v-model="dialogVisible">
            <el-form label-width="100px"
                     :model="formdata"
                     :rules="rules"
                     ref="formdata">
                <el-form-item label="评论内容"
                              prop="body">
                    <el-input v-model="formdata.body"
                              type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button type="primary"
                           @click="submitForm('formdata')">确认</el-button>
                <el-button @click="resetForm('formdata')">重置</el-button>
                <el-button @click="dialogVisible=false">取消</el-button>
            </div>
        </el-dialog>
    </section>
</template>
<script>
export default {
    data() {
        return {
            //表格数据
            tableData: [

            ],
            // 多选
            sels: [],
            //分页
            pagesize: 0,
            total: 0,
            currentpage: 0,
            dialogVisible: false,
            formdata: {
                id: 0,
                title: '',
                body: '',
                user_id: ''
            },
            submitMethod: 'get',
            submitUrl: 'api/comment',
            //验证表单规则
            rules: {

            }

        }
    },
    methods: {
        pageHandle(val) {
            api.getDataByPage('api/comment', val, this);
        },
        // 多选
        selsChange(sels) {
            this.sels = sels;
        },
        // 编辑
        editHandle(index, row) {
            let me = this;
            window.axios({
                url: 'api/comment/' + row.id + '/edit',
                method: 'get',
            }).then((res) => {
                me.formdata.id = res.data['id'];
                me.formdata.article_id = res.data['article_id'];
                me.formdata.root_id = res.data['root_id'];
                me.formdata.user_id = res.data['user_id'];
                me.formdata.body = res.data['body'];
                me.submitUrl = 'api/comment/' + row.id;
                me.submitMethod = 'put';
                me.dialogVisible = true;
            })
        },
        // 删除
        delHandle(index, row) {
            api.delData('api/comment', row.id, this);
        },
        // 批量删除
        batchRemove() {
            api.delData('api/comment', this);
        },
        submitForm(formName) {
            let me = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // alert('submit!');
                    window.axios({
                        url: me.submitUrl,
                        method: me.submitMethod,
                        data: me.formdata
                    }).then(function (res) {
                        me.dialogVisible = false;
                        me.$message({
                            showClose: true,
                            type: 'success',
                            message: res.data
                        });
                        me.resetForm('formdata');
                        api.getData('api/comment', this);
                    });

                } else {
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
    created() {
        api.getData('api/comment', this);
    }
}

</script>